<template>
    <div>
        <a-modal
            :title="view?'查看教育经历':(fromSate.id?'编辑教育经历':'添加教育经历')"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            :footer="view?null:footer"
        >
            <template slot="footer">
                <a-button key="back" @click="close">取消</a-button>
                <!-- <a-button style="margin: 0 10px;" key="submit" type="primary" @click="handleOk(true)">保存</a-button> -->
                <a-button class="blue-btn" type="primary" @click="handleOk(false)">确定</a-button>
            </template>
            <div class="adde-ducation-form-item">
                <a-form-model
                    :id="randomId1"
                    class="form-model-big-box form-model-big-box1"
                    ref="ruleForm1"
                    :model="fromSate"
                    :rules="rules"
                    layout="inline"
                >
                    <a-form-model-item ref="fbyyx" label="毕业院校" prop="fbyyx">
                        <a-input
                            v-if="!view"
                            v-model="fromSate.fbyyx"
                            placeholder="请输入毕业院校"
                        />
                        <span v-else>{{ fromSate.fbyyx }}</span>
                    </a-form-model-item>
                    <a-form-model-item ref="fkssj" label="开始时间" prop="fkssj">
                        <a-month-picker v-if="!view" placeholder="请选择结束时间" v-model="fromSate.fkssj"/>
                        <span v-else>{{ moment(fromSate.fkssj).format('YYYY-MM') }}</span>
                    </a-form-model-item>
                    <a-form-model-item ref="fjssj" label="结束时间" prop="fjssj">
                        <div v-if="!view">
                            <span v-if="fromSate.fjssj && fromSate.fjssj.zjtext">至今</span>
                            <a-month-picker v-else placeholder="请选择结束时间" v-model="fromSate.fjssj"/>
                            <a-button style="margin: 0 10px;" class="blue-btn" type="primary" v-if="fromSate.fjssj && fromSate.fjssj.zjtext" @click="fromSate.fjssj = ''">时间</a-button>
                            <a-button style="margin: 0 10px;" class="blue-btn" type="primary" v-else @click="fromSate.fjssj = {zjtext:'至今'}">至今</a-button>
                        </div>
                        <span v-else>{{ fromSate.fjssj && fromSate.fjssj.zjtext?'至今':moment(fromSate.fjssj).format('YYYY-MM') }}</span>
                    </a-form-model-item>
                    <a-form-model-item ref="fzy" label="所学专业" prop="fzy">
                        <a-input
                            v-if="!view"
                            v-model="fromSate.fzy"
                            placeholder="请输入所学专业"
                        />
                        <span v-else>{{ fromSate.fzy }}</span>
                    </a-form-model-item>
                    <a-form-model-item ref="fxl" label="学历" prop="fxl">
                        <span slot="label" style="flex:1;display: flex;justify-content: space-between;">
                            <span>学</span>
                            <span>历</span>
                        </span>
                        <compSelector
                            v-if="!view"
                            :key="compSelectorkey"
                            v-model="fromSate.fxl"
                            :defaultValue="fromSate.fxl"
                            compType="Select"
                            :bigFontSize="true"
                            dictionaryType="学历代码"
                            :width="180.4"
                            @selectHandleChange="selectHandleChange('fxl',$event)"
                        />
                        <span v-else>{{ fromSate.fxl }}</span>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </a-modal>
    </div>
</template>
<script>
import {
    sysUserJyjladdJyjl,
    sysUserJyjleditJyjl,
} from './service/index'
import compSelector from '@/components/compSelector/compSelector.vue'
import moment from 'moment'
export default {
    components:{
        compSelector,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            moment:moment,
            fromSate:{},
            randomId1:'formModeld'+new Date().getTime(),
            rules:{
                fbyyx: [{ required: true, message: '请输入毕业院校', trigger: 'blur' }],
                fkssj: [{ type: 'object',required: true, message: '请选择开始时间', trigger: 'change' }],
                fjssj: [{ type: 'object',required: true, message: '请选择结束时间', trigger: 'change' }],
                fzy: [{ required: true, message: '请输入所学专业', trigger: 'blur' }],
                fxl: [{ required: true, message: '请选择学历', trigger: 'blur' }],
            },
            compSelectorkey:null,
            view:false,
            
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row,view){ 
            this.view = view
            row = {
                ...row,
                fjssj:row.fjssj == '至今'?{zjtext:'至今'}:(row.fjssj?moment(row.fjssj):''),
                fkssj:row.fkssj?moment(row.fkssj):''
            }
            this.fromSate = row
            this.$nextTick(()=>{//表格所有标题样式
                setTimeout(() => {
                    this.getFormLabelStyle(this.randomId1,1)
                }, 200)
                
            })
        },
        getFormLabelStyle(id,val){
            var parentElement = document.getElementById(id)//要不一样的id，避免不同组件加载到一样的
            var elements = parentElement.getElementsByClassName("ant-form-item");
            for (var i = 0; i < elements.length; i++) {
                let element = elements[i]
                if(element){
                    let itemLabel = elements[i].getElementsByClassName('ant-form-item-label')
                    if(itemLabel.length && itemLabel[0].getElementsByTagName('label').length){
                        //console.log(itemLabel[0].getElementsByTagName('label'))
                        if(val){
                            itemLabel[0].getElementsByTagName('label')[0].style = 
                            'width:100px;display: flex;align-items: center;justify-content: flex-end;font-weight: 600;height: 32px;font-family:simHei;'
                        }else{
                            itemLabel[0].getElementsByTagName('label')[0].style = 
                            'width:100px;display: flex;align-items: center;justify-content: flex-end;font-weight: 600;font-family:simHei;'
                        }
                    }
                }
            }
        },
        selectHandleChange(name,val){

        },
        handleOk(val){
            this.$refs.ruleForm1.validate(valid => {
                if (valid) {
                    this.onSubmit(val)
                } else {
                //console.log('error submit!!');
                return false;
                }
            });
            
        },
        onSubmit(val){
            let data = {
                ...this.fromSate,
                fjssj:this.fromSate.fjssj.zjtext?'至今':moment(this.fromSate.fjssj).format('YYYY-MM'),
                fkssj:moment(this.fromSate.fkssj).format('YYYY-MM'),
            }
            if(this.fromSate.id){
                sysUserJyjleditJyjl(data).then(res=>{
                    if(res.code == 200){
                        this.visible = val
                        this.$message.success(res.message)
                        this.$emit('sussecEducation',val)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                sysUserJyjladdJyjl(data).then(res=>{
                    if(res.code == 200){
                        this.visible = val
                        this.$message.success(res.message)
                        this.$emit('sussecEducation',val)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
        }
    }
}
</script>
<style lang="less">
    .adde-ducation-form-item{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            // display: flex;
            // align-items: center;
            display: flex;
            align-items: center;
        }
        .toolbox-form-item{
            width: 50%;
            // padding: 3px;
        }
        .ant-form-item-with-help{
            margin-bottom: 10px;
        }
        .form-model-big-box{
            .form-item-flex-1{
                display: flex;
                .ant-form-item-control-wrapper{
                    flex: 1;
                    
                }
            }
            .ant-form-item-control-wrapper{
                font-family:仿宋_GB2312 !important;
                
                .ant-checkbox-group{
                    height: 40px;
                    line-height: 40px;
                }
            }
        }
        .form-model-big-box1{
            .ant-form-item-label{
                
                margin: 4px 3px;
                label{
                    padding-left: 3px;
                    color: rgba(0, 0, 0, 0.85);
                    background-color:#e6f7ff;
                    font-size: 16px;
                    font-weight: 600;
                }
                
            }
        }
        .ant-form-inline .ant-form-item > .ant-form-item-label{
            vertical-align: middle !important;
        }
        
    }
</style>